<div class="bk_content_ful">
	<div class="layui-card">
		<div class="layui-tab layui-tab-brief bk_tap" lay-filter="docDemoTabBrief">
			<div class=" bk-side-child" style="width: 276px;">
				<div class="layui-card bk_full has_header left_tree">
					<div class="layui-card-header">
						<div class="tree_top_ss"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="关键字"
							 class="layui-input">
							<i class="layui-icon search-icon"></i>
						</div>
						<h1>上会任务列表</h1>
					</div>
					<div class="bk_full">
						<div id="test1" class="demo-tree demo-tree-box"></div>
					</div>
					<!-- 左侧子树 -->
				</div>
				<div class="yincang_on" id="bk_toggle">&nbsp;</div>
			</div>
			<!-- 右边内容区域 -->
			<div class="bk_hastap_right toggle_w" style=" margin-left:270px;">
				<div class="layui-card-header bk_header">
					<h1>任免上会管理>>上会人员</h1>
				</div>
				<div class="bk-card-body">

					<form class="layui-form" action="">
						<div class="layui-row bk_search_box">

							<div class="layui-col-xs3 search-input " id="status-check" style="width: 25%;">
								<div class="layui-form-item">
									<label class="layui-form-label">状态:</label>
									<div class="layui-input-block">
										<input type="checkbox" name="" title="当前" lay-skin="primary" checked>
										<input type="checkbox" name="" title="历史" lay-skin="primary">
									</div>
								</div>
							</div>
							<div class="layui-col-xs3 search-input" style="width: 31%;">
								<div class="layui-form-item">
									<label class="layui-form-label">任免批次:</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="全部或部分任免批次" autocomplete="off"
										 class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-xs3 search-input" style="width: 31%;">
								<div class="layui-form-item">
									<label class="layui-form-label">任免文号:</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="全部或部分任免文号" autocomplete="off"
										 class="layui-input">
									</div>
								</div>
							</div>
							<div class="right_btn">
								<button type="button" class="layui-btn">查询</button>
								<button type="button" class="layui-btn layui-btn-primary resize-button">重置</button></div>
						</div>
					</form>

					<div class="">
						<table id="demo_hash" lay-even="" lay-filter="table_data">
						</table>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container opertion-btnBox">
				 <a href="javascript:;" class="layui-btn layui-btn-xs  operaion-button" lay-event="add">
				  		<i class="layui-icon">&#xe669;</i> <span>刷新</span>
				 </a>
				 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
				  		<i class="layui-icon">&#xe610;</i> <span>编辑</span>
				 </a>
				 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
				  		<i class="layui-icon">&#xe610;</i> <span>删除</span>
				 </a>
				<a href="javascript:;" class="  layui-btn-xs">
				 		   本次查询人数：<span class="total-color"  >10</span>人
				</a>
                 <div class="form-righttool" style="float: right">
					 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
					  		<i class="layui-icon">&#xe610;</i> <span>选人</span>
					 </a>
					 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
					  		<i class="layui-icon">&#xe610;</i> <span>完成上会任务</span>
					 </a>
					 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
					  		<i class="layui-icon">&#xe610;</i> <span>导出上会材料</span>
					 </a>
                  <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="LAYTABLE_COLS">
                   		<i class="layui-icon">&#xe610;</i> <span>显示设置</span>
                  </a>
				  <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="LAYTABLE_EXPORT">
				   		<i class="layui-icon">&#xe67d;</i> <span>导出</span>
				  </a>
                 </div>
    </div>
 </script>

<script>
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form;
		form.render()
		//第一个实例

		table.render({
			// size: 'sm',
			id: "input_table",
			limit: 20,
			elem: '#demo_hash',
			toolbar: "#toolbarDemo", //false
			defaultToolbar: [],
			height: 'full-200',
			url: 'views/pages/meeting-manage/meeting-people/list.json', //数据接口
			page: true, //开启分页
			cols: [
				[{
						checkbox: true,
						fixed: true,
						width: 50
					}, {
						field: 'username',
						title: '姓名',
						width: 80,
						sort: true,	align: "center"
					}, {
						field: 'sex',
						title: '性别',
						width: 80,
						sort: true,	align: "center"
					}, {
						field: 'sfzh',
						title: '身份证号',
						width: '13%',
						sort: true,	align: "center"
					}, {
						field: 'csny',
						title: '出生年月',
						width: 120,
						sort: true,	align: "center"
					}, {
						field: 'mz',
						title: '民族',
						width: 80,
						sort: true,	align: "center"
					}, {
						field: 'gzdwjzw',
						title: '工作单位及职务(全称)',
						width: '17%',
						sort: true,	align: "center"
					}, {
						field: 'xzj',
						title: '现职级',
						width: '10%',
						sort: true,	align: "center"
					}, {
						field: 'rxzsj',
						title: '任现职级时间',
						width: '13%',
						sort: true,	align: "center"
					}, {
						field: 'gzdwjzw',
						title: '工作单位及职务(简称)',
						width: '17%',
						sort: true,	align: "center"
					}, {
						field: 'zwcc',
						title: '职务层次',
						width: '12%',
						sort: true,	align: "center"
					}

				]
			]
		});

		//监听事件
		//监听工具条
		//监听工具条
		table.on('toolbar(table_data)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
				case 'add':
					editBytton()
					break;
				case 'delete':

					break;
				case 'edit':
					editBytton()

					break;
				case 'reload':
					table.reload('input_table', {
						where: {
							username: null,
							email: null
						}
					});

					break;
			};
		});

	});
</script>
<script>
	layui.use(['tree', 'util'], function() {
		var tree = layui.tree,
			layer = layui.layer,
			util = layui.util
			//模拟数据
			,
			data1 = [{
					title: '2019年10月第1批',
					id: 1,
					children: []

				},
				{
					title: '2019年10月第2批',
					id: 1,
					children: []

				}
			]
		//常规用法
		tree.render({
			elem: '#test1' //默认是点击节点可进行收缩
				,
			data: data1
		});
	});
	// 渲染时间组件
	function leyuiUseDate(data) {
		data.forEach(function(item) {
			laydate.render({
				elem: item //指定元素
			});
		})
	}
	// 弹出编辑框
	function editBytton() {
		layer.open({
			type: 2,
			area: ['1000px', '360px'],
			maxmin: true,
			// offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
			id: "2", //防止重复弹出
			title: '人员信息编辑',
			content: "views/pages/meeting-manage/meeting-confirm/peopleEdit.html",
			btn: ['提交', '重置'],
			btnAlign: 'c' //按钮居中
				,
			shade: [0.3, '#393D49'] //不显示遮罩
				,
			yes: function() {
				layer.closeAll();
			}
		});
	}
</script>

<script>
	(function() {
		"use strict";
		//左侧树收缩
		var left_pd = $(".bk-side-child").width();
		console.log(left_pd)
		$("#bk_toggle").click(function() {
			if ($(this).hasClass("yincang_on")) {
				$(".bk-side-child").animate({
					width: '7px'
				}, 500);
				$(".left_tree").fadeOut();
				$(".toggle_w").animate({
					marginLeft: '0px'
				});
				//	 $(".xmjg_home_xxk").animate({left:'-=332px'});
				$(this).removeClass("yincang_on");
				$(this).addClass("yincang_off");
				$(this).animate({
					right: '7px'
				}, 500);
			} else {
				$(".bk-side-child").animate({
					width: left_pd
				}, 500);
				$(".toggle_w").animate({
					marginLeft: left_pd - 10
				});
				$(".left_tree").fadeIn();
				//	$(".xmjg_home_xxk").animate({left:'+=332px'});
				$(this).removeClass("yincang_off");
				$(this).addClass("yincang_on");
				$(this).animate({
					right: '1px'
				}, 500);
			}
		});
	})(jQuery);
</script>
<style scoped>
	.input-date {
		width: 39.5%;
	}

	#status-check .layui-form-label {
		width: auto;
		display: inline-block;
	}

	#status-check .layui-input-block {
		margin-left: 0;
	}

	#status-check .layui-form-checkbox span {
		padding: 0 3px
	}
</style>
